<template>
	<view>
		<view v-if="orderList.length<=0" style="margin-bottom: 0px;" class="header margin padding">
			<view class="top">
				<view>
					亲爱的会员，你好
				</view>
				<view @click="goOrder">
					我的订单<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="center text-white" style="top: 58%;">
				<view style="font-size: 44rpx;">
					贴心服务已准备好
				</view>
				<view style="font-size: 44rpx;">
					等待您的入住
				</view>
			</view>
		</view>
		<swiper v-else @change="swiperChange" :indicator-dots="true" :current='current'>
			<swiper-item v-for="(item,index) in orderList" :key='index'>
				<view v-if="item.orderState==2" class="swiper-item">
					<view class="header margin padding">
						<view class="top">
							<view>
								{{item.hotel.hotelName}}
							</view>
							<view class="cu-tag light radius">
								待接单
							</view>
						</view>
						<view class="center sm text-white">
							请等待酒店确认您的订单
						</view>
						<view class="bottom" @tap="openMap(item.hotel)">
							<text class="iconfont icon-dizhi"></text>
							<text class='hotelAddress'>
								{{item.hotel.hotelAddress}}
							</text>
							<text class="cuIcon-right" style="float: right;"></text>
						</view>
					</view>
				</view>
				<view v-else-if="item.orderState==3" class="swiper-item">
					<view class="header margin padding">
						<view class="top">
							<view>
								{{item.hotel.hotelName}}
							</view>
							<view class="cu-tag light radius">
								选房间
							</view>
						</view>
						<view class="center sm text-white">
							酒店已接单，等待您的入住
						</view>
						<view class="bottom" @tap="openMap(item.hotel)">
							<text class="iconfont icon-dizhi"></text>
							<text class='hotelAddress'>
								{{item.hotel.hotelAddress}}
							</text>
							<text class="cuIcon-right" style="float: right;"></text>
						</view>
					</view>
				</view>
				<view v-else-if="item.orderState==4" class="swiper-item">
					<view class="header margin padding">
						<view class="top">
							<view>
								{{item.hotel.hotelName}}
							</view>
							<view v-if="item.consumptionMoney+item.otherMoney>0" @tap='openModal("lookPrice1")' class="cu-tag light radius">
								查看消费
							</view>
							<view v-else class="cu-tag light radius">
								已入住
							</view>
						</view>
						<view class="center sm text-white">
							<template v-if="item.shareFlag==1">
								共享订单:
							</template>{{item.hotelRoom.roomNo}}房间
							<text style="font-size: 26rpx;">
								<template v-if="item.lockPassword">
									<text style="margin: 0 5rpx;"></text>
									<template>
										密码{{item.lockPassword}}
									</template>
								</template>
								<template v-else>
									密码正在生效
								</template>
							</text>
							
						</view>
						<view class="center-b text-white">
							预计离店时间{{item.endTime}}
						</view>
						<view class="bottom" @tap="openMap(item.hotel)">
							<text class="iconfont icon-dizhi"></text>
							<text class='hotelAddress'>
								{{item.hotel.hotelAddress}}
							</text>
							<text class="cuIcon-right" style="float: right;"></text>
						</view>
					</view>
				</view>
				<view v-else-if="item.orderState==5" class="swiper-item">
					<view class="header margin padding">
						<view class="top">
							<view>
								{{item.hotel.hotelName}}
							</view>
							<view class="cu-tag light radius">
								消费确认
							</view>
						</view>
						<view class="center sm text-white">
							正在等待酒店查房核实消费
						</view>
						<view class="bottom" @tap="openMap(item.hotel)">
							<text class="iconfont icon-dizhi"></text>
							<text class='hotelAddress'>
								{{item.hotel.hotelAddress}}
							</text>
							<text class="cuIcon-right" style="float: right;"></text>
						</view>
					</view>
				</view>
				<view v-else-if="item.orderState==8" class="swiper-item">
					<view class="header margin padding">
						<view class="top">
							<view>
								{{item.hotel.hotelName}}
							</view>
							<view @tap='openModal("lookPrice")' class="cu-tag light radius">
								查看消费
							</view>
						</view>
						<view class="center sm text-white">
							酒店已经核实消费，请确认
						</view>
						<view class="bottom" @tap="openMap(item.hotel)">
							<text class="iconfont icon-dizhi"></text>
							<text class='hotelAddress'>
								{{item.hotel.hotelAddress}}
							</text>
							<text class="cuIcon-right" style="float: right;"></text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="bg-white padding solid-top section">
			<view>
				<view class="margin-bottom text-xl">客房服务</view>
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item" @tap='liveOut'>
						<view style="font-size: 55rpx;margin-top: -5rpx;" class="iconfont icon icon-feiji text-blue">
						</view>
						<view>离店退房</view>
					</view>
					<view class="cu-item" @tap="callClock">
						<view class="iconfont icon icon-jiaoxing text-mauve">
						</view>
						<view>叫醒服务</view>
					</view>
					<view class="cu-item" @tap='clearRoom'>
						<view style="font-size: 60rpx;margin-top: -10rpx;" class="iconfont icon icon-saoba text-yellow">
						</view>
						<view>呼叫打扫</view>
					</view>
					<view class="cu-item" v-if="orderList.length==0||orderList[current].orderType==1" @tap='extensionOrder'>
						<view style="font-size: 60rpx;margin-top: -10rpx;" class="iconfont icon icon-ruanjianxufei text-orange">
						</view>
						<view>我要续住</view>
					</view>
					<view class="cu-item" @tap="openModal('DialogModal1')">
						<view style="font-size: 60rpx;margin-top: -10rpx;" class="iconfont icon icon-mima text-green">
						</view>
						<view>密码修改</view>
					</view>
					<view class="cu-item" @tap='openDoor'>
						<view class="iconfont icon icon-yuancheng text-red">
						</view>
						<view>一键开门</view>
					</view>
					<view class="cu-item">
						<view class="iconfont icon icon-ICkaxitongmian text-gray">
						</view>
						<view class="text-gray">设置IC卡</view>
					</view>
				</view>
			</view>
			<!-- <view class="margin-top">
				<view class="margin-bottom text-xl">我的智能锁<text style="margin-left: 10rpx;" class="text-gray text-sm">开启智能酒店模式</text></view>
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item" @tap="openModal('DialogModal1')">
						<view style="font-size: 60rpx;margin-top: -10rpx;" class="iconfont icon icon-mima text-green">
						</view>
						<view>密码修改</view>
					</view>
					<view class="cu-item" @tap='openDoor'>
						<view class="iconfont icon icon-yuancheng text-red">
						</view>
						<view>远程开门</view>
					</view>
					<view class="cu-item" @tap='bluetoothOpenDoor'>
						<view class="iconfont icon icon-lanya text-blue">
						</view>
						<view>蓝牙开门</view>
					</view>
					<view class="cu-item">
						<view class="iconfont icon icon-ICkaxitongmian text-gray">
						</view>
						<view class="text-gray">设置IC卡</view>
					</view>
				</view>
			</view> -->
			<view class="margin-top" style="border: 0;">
				<view class="margin-bottom text-xl">酒店服务<text style="margin-left: 10rpx;" class="text-gray text-sm">点餐、打扫、物品借用</text></view>
				<view class="cu-list grid col-4 no-border">
					<!-- <view class="cu-item">
						<view class="iconfont icon icon-mianfeiwifi text-olive">
						</view>
						<view>WIFI</view>
					</view> -->
					<view class="cu-item">
						<view class="iconfont icon icon-wupinjieyong text-gray">
						</view>
						<view>物品借用</view>
					</view>
					<view class="cu-item">
						<view class="iconfont icon icon-diancan text-gray">
						</view>
						<view class="text-gray">点餐服务</view>
					</view>
					<view class="cu-item">
						<view class="iconfont icon icon-songhuoshangmen text-gray">
						</view>
						<view class="text-gray">送货上门</view>
					</view>
					<view class="cu-item" @click="openModal('bottomModal')">
						<view style="font-size: 40rpx; margin-top: 10rpx;" class="iconfont icon icon-lianxiwomen text-green">
						</view>
						<view>联系我们</view>
					</view>
				</view>
			</view>
			<text class="text-red">
				*请稍等哒，有些功能还未开放，我们会尽快上线哦~
			</text>
		</view>
		<view class="cu-modal bottom-modal" @tap="hideModal" :class="modalName=='bottomModal'?'show':''">
			<view @tap.stop="" class="cu-dialog">
				<view class="padding-xl bg-white">
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" @click="openCall('4008787651')">
							<view style="font-size:45rpx;margin: 9rpx;" class="iconfont icon-fuwupingjia-kefu icon text-red">
							</view>
							<view>总部客服</view>
						</view>
						<view class="cu-item" @click="callQt">
							<view class="iconfont icon-tubiaozhizuomoban icon text-cyan">
							</view>
							<view>前台客服</view>
						</view>
						<!-- <view class="cu-item">
							<view style="color: #51c332;" class="iconfont icon-wechat icon cuIcon">
							</view>
							<view>微信客服</view>
						</view> -->
						<button open-type="contact" class="contentBtn cu-item">
							<view style="color: #51c332;" class="iconfont icon-wechat icon">
							</view>
							<view>微信客服</view>
						</button>
						<view class="cu-item">
							<view class="iconfont icon-tousu icon text-brown">
							</view>
							<view>投诉意见</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改密码</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="text-red margin-tb">密码只能是4-8位数字，且在下次订房时生效</view>
				<form>
					<view class="cu-form-group">
						<view class="title">密码</view>
						<input placeholder="请输入密码" v-model="pwd"></input>
					</view>
					<!-- <view class="cu-form-group">
						<view class="title">确认密码</view>
						<input placeholder="请输再次入密码" type="password" v-model="newPwd"></input>
					</view> -->
				</form>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="savePwd">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='extensionOrder'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">我要续住</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<form>
					<view class="cu-form-group">
						<view class="title">天数</view>
						<input placeholder="请输入续住天数" v-model="day"></input>
					</view>
				</form>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="continueToLive">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='lookPrice1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认消费</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="bg-white">
					<view class="text-red">已经消费金额，如有误请联系前台</view>
					<form>
						<view class="cu-form-group">
							<view class="title">房间内消费</view>
							<view>{{orderList[current].consumptionMoney}}</view>
						</view>
						<view class="cu-form-group">
							<view class="title">其他消费</view>
							<view>{{orderList[current].otherMoney}}</view>
						</view>
						<view class="cu-form-group">
							<view class="title">备注</view>
							<view>{{orderList[current].remarks?orderList[current].remarks:''}}</view>
						</view>
					</form>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='lookPrice'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认消费</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="bg-white">
					<view class="text-red">确认消费后，将退还您的押金</view>
					<form>
						<view class="cu-form-group">
							<view class="title">房间内消费</view>
							<view>{{orderList[current].consumptionMoney}}</view>
						</view>
						<view class="cu-form-group">
							<view class="title">其他消费</view>
							<view>{{orderList[current].otherMoney}}</view>
						</view>
						<view class="cu-form-group">
							<view class="title">备注</view>
							<view>{{orderList[current].remarks?orderList[current].remarks:''}}</view>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="savePrice(0)">金额有问题</button>
						<button class="cu-btn bg-green margin-left" @tap="savePrice(1)">确认无误</button>
					</view>
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="show" @confirm="confirm" :params="params"></u-picker>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import cool from './cool.js'
	export default cool
</script>

<style lang="scss" scoped>
	.hotelAddress{
		width: 580rpx;
		display: inline-block;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.contentBtn{
		margin: -2px 10rpx 0 10rpx;
		padding: 0;
		background-color: #FFFFFF;
		border: 0;
		font-size: 28rpx;
		color: #444;
		&>view{
			height: 52rpx;
			line-height: 52rpx;
			.icon{
				margin-bottom: 0rpx !important;
			}
			.icon+view{
				margin-top: -10rpx;
			}
		}
	}
	swiper{
		height: 320rpx;
		// margin-bottom: 40rpx;
		.cu-tag{
			background-color: rgba(0,0,0,0) !important;
			color: #FFFFFF;
			border: 1rpx solid #FFFFFF;
		}
	}
	.header{
		height: 300rpx;
		background-image: url(~@/static/cool/bg.png);
		background-size: 100%;
		position: relative;
		.top{
			display: flex;
			justify-content: space-between;
		}
		.bottom{
			position: absolute;
			width: 640rpx;
			bottom:50rpx;
			.cuIcon-right{
				margin-top: 4rpx;
			}
		}
		.center{
			text-align: center;
			font-size: 60rpx;
			font-weight: bold;
			width: 100%;
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%,-50%);
		}
		.center.sm{
			font-size: 36rpx;
		}
		.center-b{
			text-align: center;
			width: 100%;
			position: absolute;
			left: 50%;
			top: 59%;
			font-size: 28rpx;
			transform: translate(-50%,-50%);
		}
	}
	.section{
		border-radius: 40rpx 40rpx 0 0;
		box-shadow: 0px -10rpx 15rpx 3rpx #eee;
		&>view{
			border-bottom: 2rpx solid #EEEEEE;
		}
		.icon{
			font-size: 50rpx;
			margin-bottom: 10rpx;
		}
	}
	.cu-modal{
		.icon{
			font-size: 50rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
